nav{
	background: #1891AC;
}

.mainbody{
	width:100%;
	padding: 0 10%;
	padding-top:100px;
}

.ti-list, .classify-nav{
	width:100%;
}

.list-nav{
	display: flex;
	background: #5bc0de;
	border-radius: 5px;
	padding: 5px 0;
	justify-content: space-around;
	color: #fff;
	align-items: center;
}

.list-nav li{
	list-style: none;
}

.list-nav li:hover > ul{
	display: block;
}

.list-nav li ul{
	position: absolute;
	display: none;
	background: #fff;
	border:1px #A7D7C5 solid;
	border-radius: 5px;
	width: 10%;
	margin: 0;
	padding: 0;
	color:#205D67;
	font-size: 0.9rem
}

.list-nav li ul a{
	text-decoration: none;
	color:#205D67;
}

.list-nav li ul a:hover{
	text-decoration: none;
	color:#205D67;
}

.list-nav li ul a li{
	line-height: 30px;
	padding-left:10px;
	width: 100%;
}

.list-nav li ul a li:hover{
	background: #f7f7f7;
	cursor: pointer;
}

.table-border{
	margin-top:30px;
	border-bottom:1px #ccc solid;
	border-top:1px #ccc solid;
	font-size: 0.9rem;
}

.table-border thead tr th{
	border:1px #ccc solid;
}

tr td a{
	color: #205D67;
}

tr td a:hover {
	text-decoration: none;
	color: #205D67;
}

.table-strip tbody tr:nth-child(odd){
	background: #F7F7FF
}

.easy-hard{
	padding: 5px 20%;
	border-radius: 5px;
	color: #fff
}

.easy{
	background: #FFDD67;
}

.middle{
	background:#FFD480;
}

.hard{
	background: #FCA180;
}

.very-hard{
	background: #F56262;
}

.page{
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	width:100%;
	margin-top:50px;
}

.page a{
	display: block;
	margin: 0.5%;
	border: 1px #ccc solid;
	padding: 1% 1.2%;
	border-radius: 30%;
	text-decoration: none;
}

.activity{
	background: #5bc0de;
	color: #fff;
}

.activity:hover{
	color: #fff;
}

.status{
	display: inline-block;
	width:10px;
	height: 10px;
	border-radius: 50%;
	background: green;
	margin-right: 5px;
}

.accepted{
	background: rgb(39, 194, 76);
}

.compiling{
	background: #FC8A15;
}

.pending{
	background: #bbb;
}

.running{
	background: red;
}

@media (max-width: 768px){
	.list-nav li ul{
		width: 20%;
	}

	.mainbody{
		/*padding-top:100px;*/
		padding: 0 1%;
	}

	.classify-nav{
		margin-top:100px;
		width:100%;
	}
}




